<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/includes.jsp"%>

<center>
	<form:form modelAttribute="searchBean" method="post">
		<table>
			<tr>
				<td>Address:</td>
				<td><form:input path="address" size="45" maxlength="45" />
				</td>
				<td><form:errors path="address" cssClass="errors" />
				</td>
				<td><input type="submit" value="Find events" />
				</td>
			</tr>
		</table>
	</form:form>
	<p>
	<c:if test="${events != null}">
		<script type="text/javascript">
			function openInfoWindow(infoWindow, marker){
				infoWindow.open(marker.getMap(),marker);
			}
			
			function partial(func /*, 0..n args */) {
				var args = Array.prototype.slice.call(arguments).splice(1);
				return function() {
					var allArguments = args.concat(Array.prototype.slice.call(arguments));
				    return func.apply(this, allArguments);
				};
			}
		
			function loadMarkers(){
				var array = new Array();
				var marker;
				var i = 0;
				var infowindow;
				var contentString;
				<c:forEach items="${events}" var="event">
				   marker = new google.maps.Marker({
				        position: new google.maps.LatLng(${event.latitude}, ${event.longitude}), 
				        title: '${event.title}'
				    });
				   
				   contentString = '<strong><a href="${event.url}">${event.title}</a></strong><br/>'  + 
				   '<img align="middle" src ="${event.imageUrl}" /> ${event.startTime}<hr/>' + 
				   '${event.description}';
				   
				   
				   infoWindow = new google.maps.InfoWindow({
				        content: contentString
				   });
				   
				   var call = function(){
					   openInfoWindow(infoWindow, marker);
				   }
				   
				   google.maps.event.addListener(marker, 'click', partial(openInfoWindow, infoWindow, marker));
				   
				   array[i++] = marker;
				</c:forEach>
				return array;
			}
		</script>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
			
		<script type="text/javascript">
		
			function initialize() {
				var myOptions = {
					zoom : 13,
					mapTypeId : google.maps.MapTypeId.HYBRID
				};
				var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
				var markers = loadMarkers();
				map.setCenter(markers[0].getPosition());
				for(i=0;i<markers.length;i++){
					markers[i].setMap(map);
				}
			}
			google.maps.event.addDomListener(window, 'load', initialize);
		</script>
		
		<div id="map_canvas" style="width:80%; height:300px;"></div>
	</c:if>
	
	
	<c:if test="${eventsCount == 0}">
		<c:out value="No events found"></c:out>
	</c:if>
</center>



